@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
    padding: 0;
    margin: 0;
}
input {
    outline: none;
    border: none;
}
a{
    text-decoration: none;
}

.container {
    position: relative;
    // display: flex;
    // justify-content: center;
    width: 1500px;
    height: 700px;
    background: linear-gradient(-30deg, #cfb1db 0%,#ca65c2 50%,#c43e87 50%,#f1c7f1 100%);
    filter:hue-rotate(120deg);
    animation:animate 10s linear infinite;
    @keyframes animate {
        0%
        {
            filter:hue-rotate(0deg);
        }
        100%
        {
            filter:hue-rotate(360deg);
        }
    }
    
       
    .snow {
        position: relative;
    }
    
    .xue {
        position: absolute;
        display: inline-block;
        /* opacity: .7; */
        outline: none;
        border: none;
        animation: xuehua 5s infinite linear;
    }
    
    .xue:hover {
        cursor: pointer;
        animation-play-state: paused;
        opacity: 1;
    }
    
    @keyframes xuehua{
        from{
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
        }
        to{
            opacity: 0;
            transform: translate(0, 700px) rotateZ(720deg) rotateY(720deg) scale(1.5);
        }
    }
    #remainTime{
        margin-left: 10px;
        margin-top: -60px;
        font-size: 60px;
        text-align: center;
        span {
            color: rgb(223, 33, 122);
            font-weight: bold;
            margin-right: 10px;
        }
    }
   
    // 背景图片

    img {
    //    margin-top: 70px;
        margin-left: 100px;
        // position: fixed;
        width: 200px;
        height: 150px;
        // opacity: 0.7;
    }


    // 注册登录框
    .login-box {
        text-align: center;
        h2{
            margin-bottom: 10px;
            font-size: 17;
            a{
                color: rgb(245, 238, 233);
                &:hover{
                    border-bottom: rgb(245, 238, 233) 3px solid;
                }
            }
            span{
                color: rgb(245, 238, 233);
                margin: 0 6px;
            }
        }
        position: absolute;
        width: 450px;
        padding: 10px 80px;
        margin-top: 50px;
        // // 水平垂直居中
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(174, 158, 248, 0.5);
        box-sizing: border-box;
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        form {

            background-color: rgba(211, 204, 241, 0.5);
            position: relative;
            border: rgb(245, 238, 233) 2px dotted;
            width: 300px;
            border-radius: 20px 20px;
            padding: 0px 6px;
            .inputbox {
                background: url(../static/image/user.png) no-repeat ;
                background-size: 30px 30px;
                background-position: left 25px;
                p{
                    color: sienna;
                    font-size: 14px;
                }
                input {
                    width: 215px;
                    // padding: 6px 0;
                    padding-top: 30px;
                    font-size: 16px;
                    color: #fff;
                    /*字符间的间距1px*/
                    letter-spacing: 1px;
                    margin-bottom: 8px;
                    border-bottom: 2px dotted #fff;
                    background: transparent;

                //  &[type="text"]{
                //      width: 200px;
                   
                //  }
                }
            }
            input[type="submit"] {
                background: transparent;
                margin-top: 10px;
                padding: 15px 20px;
                font-size: 14px;
                color: #fff;
                background: rgba(174, 158, 248, 0.7);
                cursor: pointer;
                border-radius: 10px;
                &:hover{
                    color: rgba(42, 13, 172, 0.7);
                }
            }
        }
    }
}
